<template>
  <div>
    <div style="margin: 10px 0">
      <el-select v-model="para.identity" placeholder="请选择客户身份">
        <el-option label="业主" value="业主"></el-option>
        <el-option label="租客" value="租客"></el-option>
        <el-option label="家庭成员" value="家庭成员"></el-option>
      </el-select>
      <el-input style="width: 200px;margin-left: 10px" placeholder="请输入姓名" suffix-icon="el-icon-search" v-model="para.userName"></el-input>
      <el-input style="width: 200px" placeholder="请输入电话" suffix-icon="el-icon-message" class="ml-5" v-model="para.phone"></el-input>
      <el-input style="width: 200px" placeholder="请输入楼栋" suffix-icon="el-icon-position" class="ml-5" v-model="para.room"></el-input>
      <el-button class="ml-5" type="primary" @click="load">查询</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
      <el-button style="margin-left: 300px" type="primary" @click="handleAdd">新增客户<i class="el-icon-circle-plus-outline"></i></el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  style="width: 100%">
      <el-table-column prop="userName" label="姓名" width="100"></el-table-column>
      <el-table-column prop="identity" label="身份" width="80"></el-table-column>
      <el-table-column prop="gender" label="性别" width="50"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
      <el-table-column prop="phone" label="电话" width="120"></el-table-column>
      <el-table-column prop="roomCount" label="房屋" width="60"></el-table-column>
      <el-table-column prop="carCount" label="车辆" width="60">
<!--        <el-button type="text" @click="showCar(scope.row.id)"></el-button>-->
      </el-table-column>
      <el-table-column label="操作"  width="750" align="center">
        <template v-slot="scope">
          <el-button type="primary" @click="showRoom(scope.row.id)">住宅详情</el-button>
          <el-button type="primary" @click="showCar(scope.row.id)">车辆详情</el-button>
          <el-button type="warning" @click="showMembers(scope.row.id)">成员</el-button>
          <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-button type="warning" @click="innerRoom(scope.row.id)">入住房屋</el-button>
          <el-button type="warning" @click="exitRoom(scope.row.id)">房屋解绑</el-button>
          <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="para.pageNum"
          :page-sizes="[5,10,15,20]"
          :page-size="para.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="业主信息" :visible.sync="dialogFormVisible" width="38%" >
      <el-form label-width="80px" size="middle">
        <el-form-item label="姓名">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select clearable v-model="form.identity" placeholder="请选择身份" style="width: 100%">
            <el-option label="业主" value="业主"></el-option>
            <el-option label="租客" value="租客"></el-option>
            <el-option label="家庭成员" value="家庭成员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select clearable v-model="form.gender" placeholder="性别" style="width: 100%">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号">
          <el-input v-model="form.inNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="入住房屋" :visible.sync="inRoomFormVisible" width="38%" >
      <el-form label-width="80px" size="middle">
        <el-form-item label="楼栋">
          <el-select clearable v-model="residence.building" placeholder="请选择楼栋" style="width: 100%">
            <el-option label="1栋" value="1栋"></el-option>
            <el-option label="2栋" value="2栋"></el-option>
            <el-option label="3栋" value="3栋"></el-option>
            <el-option label="4栋" value="4栋"></el-option>
            <el-option label="5栋" value="5栋"></el-option>
            <el-option label="6栋" value="6栋"></el-option>
            <el-option label="7栋" value="7栋"></el-option>
            <el-option label="8栋" value="8栋"></el-option>
            <el-option label="9栋" value="9栋"></el-option>
            <el-option label="10栋" value="10栋"></el-option>
            <el-option label="11栋" value="11栋"></el-option>
            <el-option label="12栋" value="12栋"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单元">
          <el-select clearable v-model="residence.unit" placeholder="请选择单元" style="width: 100%">
            <el-option label="1单元" value="1单元"></el-option>
            <el-option label="2单元" value="2单元"></el-option>
            <el-option label="3单元" value="3单元"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋">
          <el-select clearable v-model="residence.room" placeholder="请选择房间" style="width: 100%">
            <el-option label="101" value="101"></el-option>
            <el-option label="102" value="102"></el-option>
            <el-option label="201" value="201"></el-option>
            <el-option label="202" value="202"></el-option>
            <el-option label="301" value="301"></el-option>
            <el-option label="302" value="302"></el-option>
            <el-option label="401" value="401"></el-option>
            <el-option label="402" value="402"></el-option>
            <el-option label="501" value="501"></el-option>
            <el-option label="502" value="502"></el-option>
            <el-option label="601" value="601"></el-option>
            <el-option label="602" value="602"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveinner">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="成员信息" :visible.sync="dialogTableVisible">
      <el-table :data="member">
        <el-table-column prop="userName" label="姓名" width="100"></el-table-column>
        <el-table-column prop="gender" label="性别" width="50"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
        <el-table-column prop="phone" label="电话" width="200"></el-table-column>
        <el-table-column prop="roomCount" label="住址" width="100"></el-table-column>
        <el-table-column label="操作"  width="500" align="center">
          <template v-slot="scope">
            <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
            <el-button type="warning">入住房屋</el-button>
            <el-button type="warning">房屋解绑</el-button>
            <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？"
                           @confirm="del(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="成员信息" :visible.sync="carTableVisible">
      <el-table :data="usercar">
        <el-table-column prop="plateNum" label="车牌号" width="200"></el-table-column>
        <el-table-column prop="color" label="颜色" width="80"></el-table-column>
        <el-table-column prop="brand" label="品牌" width="150"></el-table-column>
        <el-table-column prop="chewei" label="车位" width="150">4-22</el-table-column>
        <el-table-column prop="youxiaoqi" label="有效期" width="150">286天</el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="住宅信息" :visible.sync="roomTableVisible">
      <el-table :data="userroom">
        <el-table-column prop="building" label="楼栋" width="80"></el-table-column>
        <el-table-column prop="unit" label="单元" width="80"></el-table-column>
        <el-table-column prop="room" label="房间" width="80"></el-table-column>
        <el-table-column prop="mianji" label="建筑/室内面积" width="150">132.65/127.36</el-table-column>
        <el-table-column prop="zujing" label="租金" width="130">2650.00</el-table-column>
        <el-table-column prop="zhuangtai" label="房屋状态" width="100">已入住</el-table-column>
        <el-table-column prop="qianfei" label="房屋欠费(按天更新)" width="150">0.00</el-table-column>
      </el-table>
      欠费小计：0.00元
    </el-dialog>

    <el-dialog title="住宅信息" :visible.sync="exitroomTableVisible">
      <el-table :data="userroom">
        <el-table-column prop="building" label="楼栋" width="80"></el-table-column>
        <el-table-column prop="unit" label="单元" width="80"></el-table-column>
        <el-table-column prop="room" label="房间" width="80"></el-table-column>
        <el-table-column prop="mianji" label="建筑/室内面积" width="150">132.65/127.36</el-table-column>
        <el-table-column prop="zhuangtai" label="房屋状态" width="100">已入住</el-table-column>
        <el-table-column label="操作"  width="200" align="center">
          <template v-slot="scope">
            <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定退房吗？"
                           @confirm="delroom(scope.row.id)"
            >
              <el-button type="danger" slot="reference">我要退房 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      tableData: [],
      total: 0,
      para:{
        pageNum: 1,
        pageSize:5
      },
      room:"",
      form: {},
      dialogFormVisible: false,
      dialogTableVisible: false,
      carTableVisible: false,
      roomTableVisible: false,
      inRoomFormVisible: false,
      exitroomTableVisible: false,
      multipleSelection: [],
      member:[],
      usercar:[],
      userroom:[],
      residence:{}
    }
  },

  created() {
    this.load()
  },

  methods: {
    load() {
      this.axios.get("users/list",{params:this.para}).then(res=>{
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    reset(){
      this.para = {pageNum: 1, pageSize:5};
      this.load();
    },
    handleAdd(){
      this.form = {};
      this.dialogFormVisible = true;
    },
    handleEdit(obj){
      this.dialogFormVisible = true;
      this.form = obj;

    },
    handleSizeChange(pageSize){
        this.para.pageSize = pageSize;
        this.load();
    },
    handleCurrentChange(pageNum){
        this.para.pageNum = pageNum;
        this.load();
    },
    showMembers(id){
      this.dialogTableVisible = true;
      console.log(id);
      this.axios.get("users/getMember/"+id).then(res =>{
        this.member = res.data.data;
      })
    },
    innerRoom(id)
    {
      this.inRoomFormVisible = true;
    },
    showCar(id){
      this.carTableVisible = true;
      this.axios.get("users/getUserCar/"+id).then(res =>{
        this.usercar = res.data.data;
      })
    },
    showRoom(id){
      this.roomTableVisible = true;
      this.axios.get("users/getUserRoom/"+id).then(res => {
        this.userroom = res.data.data;
      })
    },
    exitRoom(id){
      this.exitroomTableVisible = true;
    },
    delroom(id){
      this.axios.get("users/exitRoom/"+id).then(res => {
        this.exitroomTableVisible = false;
        this.$message({
          message:'操作成功',
          type:'success'
        });
        this.load();
      })
    },
    del(id){
      this.axios.get("users/delUser/"+id).then(res => {
        this.$message({
          message:'操作成功',
          type:'success'
        });
        this.load();
      })
    },
    save(){
      this.axios.post("users/addUser",this.form).then(res =>{
        this.$message({
          message:'操作成功',
          type:'success'
        });
        this.dialogFormVisible = false;
        this.load();
      })
    },
    saveinner(){
      this.axios.post("users/addResidence",this.residence).then(res =>{
        this.$message({
          message:'操作成功',
          type:'success'
        });
        this.inRoomFormVisible = false;
        this.load();
      })
    }


  }
}
</script>


<style>
.headerBg {
  background: #eee!important;
}
</style>
